<template>
  <side-bar>
    <menu-1 title="按钮">
      <menu-2 title="Cool" anchorId="buttonCool" />
      <menu-2 title="流光按钮" anchorId="flashButton" />
      <menu-2 title="霓虹按钮" anchorId="nenoButton" />
      <menu-2 title="Vue3官网卡片按钮" anchorId="vue3Card" />
    </menu-1>
    <menu-1 title="卡片">
      <menu-2 title="3D翻转卡片" anchorId="card3D" />
      <menu-2 title="3D浮动卡片" anchorId="card3D2" />
      <menu-2 title="3D增高卡片" anchorId="card3D3" />
      <menu-2 title="图片卡片" anchorId="cardImg" />
    </menu-1>
    <menu-1 title="背景">
      <menu-2 title="渐变背景" anchorId="bgGradient" />
      <menu-2 title="皮卡丘CSS背景" anchorId="bgPikachu" />
    </menu-1>
    <menu-1 title="Loading">
      <menu-2 title="条纹漏斗" anchorId="loadingStripe" />
    </menu-1>
    <menu-1 title="菜单">
      <menu-2 title="弹簧菜单" anchorId="springMenu" />
      <menu-2 title="动画菜单" anchorId="animateMenu" />
    </menu-1>
    <menu-1 title="时钟">
      <menu-2 title="呼吸时钟" anchorId="breathClock" />
      <menu-2 title="漂漂亮亮时钟" anchorId="clockAmazing" />
    </menu-1>
    <menu-1 title="花里胡哨">
      <menu-2 title="三幻神" anchorId="threeGod" />
      <!-- <menu-2 title="世界之树" anchorId="worldTree" /> -->
    </menu-1>
    <menu1 title="复选框">
      <menu-2 title="svg动画复选框" anchorId="checkbox1" />
      <menu-2 title="codePen复选框" anchorId="cpCheckBox" />
    </menu1>
    <menu-1 title="进度条">
      <menu-2 title="codePen滑动条" anchorId="range" />
      <menu-2 title="svg环形进度条" anchorId="progressCircle" />
    </menu-1>
    <menu-1 title="布局">
      <menu-2 title="普通双列+滚动条" path="/cssLayout" />
      <menu-2 title="普通双列+主题选择+响应式" path="/cssLayout2" />
      <menu-2 title="多列弹性盒子" path="/cssLayout3" />
    </menu-1>

    <menu-1 title="轮播图">
      <menu-2 title="普通轮播图" anchorId="slideShow" />
    </menu-1>
    <menu-1 title="Banner">
      <menu-2 title="bilibili秋" anchorId="bilibiliBanner" />
    </menu-1>
    <menu-1 title="Tailwind">
      <menu-2 title="小试" path="/tailwind1" />
    </menu-1>
  </side-bar>
  <css-page-main />
</template>
<script lang="ts">
import { defineComponent } from "vue";

import Menu1 from "@/components/Menu1.vue";
import Menu2 from "@/components/Menu2.vue";
import SideBar from "../components/SideBar.vue";
import CssPageMain from "./CssPageMain.vue";

export default defineComponent({
  components: {
    Menu1,
    Menu2,
    SideBar,
    CssPageMain,
  },
});
</script>

<style lang="scss" scoped></style>
